<template>
  <div class="cart">
    <Header/>
    <div class="main">
      <div class="cart-title">
        <h3>我的购物车 <span> 共{{$store.state.cart.count}}门课程</span></h3>
      </div>
      <div class="cart-info">
        <el-table
          :data="courseData"
          style="width:100%"
          ref="multipleTable"
          @select="currentSelected"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="87"></el-table-column>
          <el-table-column label="课程" width="540">
            <template slot-scope="scope">
              <div class="course-box">
                <img :src="$settings.Host + scope.row.course_img" alt="">
                {{scope.row.name}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="有效期" width="216">
            <template slot-scope="scope">
              <el-select @change="changeExpire(scope.row)" v-model="scope.row.expire" placeholder="请选择">
                <el-option v-for="item in scope.row.expire_list" :key="item.timer" :label="item.title" :value="item.timer"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="单价" width="162">
            <template slot-scope="scope">¥{{ scope.row.price.toFixed(2) }}</template>
          </el-table-column>
          <el-table-column label="操作" width="162">
            <template slot-scope="scope">
              <a @click="cartDel(scope.row, scope.row.name)">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="cart-bottom">
        <div class="select-all">
          <el-checkbox>全选</el-checkbox>
        </div>
        <div class="delete-any"><img src="" alt="">删除</div>
        <div class="cart-bottom-right">
          <span class="total">总计：¥<span>{{total_price}}</span></span>
          <span class="go-pay" @click="go_pay">去结算</span>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
  import Header from "./common/Header"
  import Footer from "./common/Footer"

  export default {
    name: "Cart",
    data() {
      return {
        //　注释掉原来的有效期测试数据
        // expire: 3,
        // expire_list: [
        //   {title: "一个月有效", id: 1},
        //   {title: "两个月有效", id: 2},
        //   {title: "三个月有效", id: 3},
        //   {title: "永久有效", id: -1},
        // ],
        courseData: [], 　// 购物车中的商品信息
        selection: [],　 // 购物车中被勾选的商品信息
        total_price: 0.00,  // 总价
      }
    },
    components: {Header, Footer},

    watch:{
      // 当课程勾选状态发生变化时核算价格
      selection(){
        this.getTotalPrice();
      },

      // 当课程数量发生变化时核算价格
      courseData(){
        this.getTotalPrice();
      }
    },

    created(){
      // 判断是否登录
      this.token = sessionStorage.token || localStorage.token;
      if(!this.token){
        this.$confirm("对不起，您尚未登录！请登录", "Attention").then(()=>{
          this.$router.push("/login");
        }).catch(()=>{
          this.$router.go(-1);
        })
      }else{
        //  获取购物车商品数据
        this.$axios.get(this.$settings.Host+"/cart/course/", {
          headers: {
            // 注意空格
            "Authorization": "jwt " + this.token
          }
        }).then(response=>{
          this.courseData = response.data;
          console.log("courseData",response.data);

          // 更新在vuex中的数据
          this.$store.state.cart.count = response.data.length;
         //  setTimeout(()=>{
         //    let text_expire_list = [];
         //    for(let i=0; i<this.expire_list.length; i++){
         //      text_expire_list[this.expire_list[i].id] = this.expire_list[i].title;
         //
         //    }
         //    console.log(text_expire_list);
         //
         //    for(let i=0; i< this.courseData.length; i++){
         //      // 设置选中效果
         //      this.$refs.multipleTable.toggleRowSelection(this.courseData[i],
         //        this.courseData[i].is_select);
         //
         //      // 修改有效期显示值
         //      this.courseData[i].expire = text_expire_list[this.courseData[i].expire];
         //    }
         //  }, 0)
          // 调整因为ajax数据请求导致勾选状态人没有出现的原因,使用定时器进行延时调用
          setTimeout(()=>{
            let expire_data = [];
            this.courseData.forEach(course=>{
              course.expire_list.forEach(row=>{
                expire_data[row.timer] = row.title;
              });
            });
            console.log("expire_data", expire_data);

            // row 就是字典数据[json]
           this.courseData.forEach(row=>{
             if(row.is_select){
               this.$refs.multipleTable.toggleRowSelection(row);
             }

             // 调整有效期选项中数值变成文本内容
             row.expire = expire_data[row.expire];
           });
          }, 0)

        }).catch(error=>{
          console.log(error.response);
          let status = error.response.status;
          if(status === 401){
            this.token = null;
            sessionStorage.removeItem("token");
            localStorage.removeItem("token");
            let _this = this;
            this.$alert("您尚未登录或登录超时！请重新登录", 'Warning', {
              callback(){
                _this.$router.push("/login");
              }
            })
          }
        })
      }
    },

    methods: {
      // 切换课程勾选状态
      currentSelected(selection, row){
        // selection 表示所有被勾选的信息
        // row 当前操作的数据
        let is_select = true;
        if(selection.indexOf(row)===-1){
          is_select = false;
        }

        // 获取当前课程ID
        let course_id = row.id;

        // 发送put请求，切换勾选状态
        this.$axios.put(this.$settings.Host+"/cart/course/", {
          course_id: course_id,
          is_select: is_select,
        }, {
           headers:{
            // 注意下方的空格!!!
            "Authorization":"jwt " + this.token
          },
        }).then(response=>{
          this.$message(response.data.message, "Attention");
        }).catch(error=>{
          console.log(error.response);
        })
      },

      // 切换课程的有效期
      changeExpire(course){
        // 获取课程ID和有效期
        let course_id = course.id;
        let expire = course.expire;

        // 发送patch请求更新有效期
        this.$axios.patch(this.$settings.Host+"/cart/course/", {
          course_id: course_id,
          expire,  // expire <==> expire: expire,
        }, {
          headers:{
            // 注意下方的空格!!!
            "Authorization":"jwt " + this.token
          },
        }).then(response=>{
          // 更新购买的商品的价格
          course.price = response.data.price;

          // 重新计算购物车中的商品总价
          this.getTotalPrice();

          this.$message(response.data.message, "Attention");
        }).catch(error=>{
          console.log(error.response);
        })
      },

       // 删除课程
      cartDel(course, course_name){
        this.$confirm(`您确定要从购物车删除《${course_name}》`, "Attention").then(()=>{
          let course_id = course.id;

          // 发送请求
          this.$axios.delete(this.$settings.Host+"/cart/course/", {
            params: {
              course_id: course_id,
            },
            headers: {
               // 注意下方的空格!!!
              "Authorization":"jwt " + this.token
            },
          }).then(response=>{
            let index = this.courseData.indexOf(course);
            this.courseData.splice(index, 1);
            console.log("courseData", this.courseData);
            this.$message("删除成功！")
          }).catch(error=>{
            console.log(error.response);
          });
        }).catch(()=>{
          // 取消操作
        })
      },

       // 获取勾选的商品课程列表
      selectionChange(data){
        this.selection = data;
        console.log("selection", this.selection);
      },

      // 核算购物车中所有勾选商品的总价格
      getTotalPrice(){
        let total = 0;
        this.selection.forEach(row=>{
          total += row.price;
        });

        // 保留２位小数
        this.total_price = total.toFixed(2);
      },

      // 提交结算，生成订单
      go_pay(){
        this.$axios.post(this.$settings.Host+"/orders/", {}, {
          headers:{
            // 注意:jwt后面必须有且只有一个空格!!!!
              "Authorization":"jwt " + this.token
          }
        }).then(response=>{
          let _this = this;
          this.$alert(response.data.message, "Attention", {
            callback(){
              _this.$router.push(`orders/${response.data.order}`);
            }
          })
        }).catch(error=>{
          console.log(error.response);
        })
      }

    }
  }
</script>
<style scoped>
  .main {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden; /* 解决body元素和标题之间的上下外边距的塌陷问题 */
  }

  .cart-title h3 {
    font-size: 18px;
    color: #666;
    margin: 25px 0;
  }

  .cart-title h3 span {
    font-size: 12px;
    color: #d0d0d0;
    display: inline-block;
  }

  .course-box img {
    max-width: 175px;
    max-height: 115px;
    margin-right: 35px;
    vertical-align: middle;
  }

  .cart-bottom {
    overflow: hidden;
    height: 80px;
    background: #F7F7F7;
    margin-bottom: 300px;
    margin-top: 50px;
  }

  .select-all {
    float: left;
    margin-right: 58px;
    line-height: 80px;
  }

  .delete-any {
    cursor: pointer;
    float: left;
    line-height: 80px;
  }

  .delete-any img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    padding-right: 15px;
  }

  .cart-bottom-right {
    float: right;
    text-align: right; /* 文本右对齐 */
  }

  .total {
    margin-right: 62px;
    font-size: 18px;
    color: #666;
  }

  .go-pay {
    outline: none;
    background: #ffc210;
    display: inline-block;
    padding: 27px 50px;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
  }
</style>
